<template>
  <!-- 资产列表的弹窗module，币币账户划转，法币账户划转都用到 -->
  <div class="transfer-box">
    <p class="dialog-title">划转</p>
    <el-form
      label-position="top"
      label-width="80px"
      :model="transferForm"
      :rules="formRelus"
      ref="transferform"
      class="transfer-form"
    >
      <p class="label-text">币种选择</p>
      <el-select
        v-model="transferForm.coin"
        placeholder="请选择"
        class="coin-select"
        @change="coinChange(transferForm.coin)"
      >
        <el-option
          v-for="item in coinOption"
          :key="item.CoinTag"
          :label="item.CoinTag"
          :value="item.Id"
        ></el-option>
      </el-select>
      <p class="label-text">划转方向</p>
      <div class="choise-box">
        <el-form-item class="choise-item">
          <el-col :span="11">
            <el-select v-model="transferForm.fronAccount" placeholder="请选择" class="choise-select">
              <el-option
                v-for="item in fromList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <span class="choise-text">转至</span>
        <el-form-item class="choise-item">
          <el-col :span="11">
            <el-select v-model="transferForm.toAccount" placeholder="请选择" class="choise-select">
              <el-option
                v-for="item in toList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.value==transferForm.fronAccount"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
      </div>
      <p class="amount-label label-text">
        <span>划转数量</span>
        <span>
          可用：{{$coin
          (transferForm.fronAccount=="法币账户"?asset.OtcCoin:(transferForm.fronAccount=="otc"?asset.OtcCoin:asset.CecCoin))}}CNY
        </span>
      </p>
      <el-form-item prop="amount">
        <el-input v-model="transferForm.amount" @input.native="numInput($event,8)">
          <span slot="suffix" class="all-text" @click="allClick()">全部划转</span>
        </el-input>
      </el-form-item>
    </el-form>
    <div class="footer-box">
      <button class="btn" @click="submitClick()">确定</button>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      coinOption: [],
      transferForm: {
        coin: "",
        fronAccount: "法币账户",
        toAccount: "币币账户",
        amount: 0
      },
      fromList: [
        { label: "法币账户", value: "otc" },
        { label: "币币账户", value: "cec" }
      ],
      toList: [
        { label: "法币账户", value: "otc" },
        { label: "币币账户", value: "cec" }
      ],
      transferrules: {},
      asset: {
        OtcCoin: 0,
        CecCoin: 0
      },
      // 表单验证规则
      formRelus: {
        amount: [
          {
            validator: (rule, value, callback) => {
              if (value) {
                if (value > 0) {
                  callback();
                } else {
                  callback(new Error("请输入正确的划转数量"));
                }
              } else {
                callback(new Error("请输入划转数量"));
              }
            },
            trigger: "blur"
          }
        ]
      }
    };
  },

  methods: {
    /*
     *划转支持----------------------------
     */

    /*
     *法币交易支持币种的加载,用于划转接口的对接
     */
    reqOtcSuppertCoin() {
      if (this.otcSuppertCoin.length <= 0) {
        console.log(1);
        this.axios.post(this.$baseURL_otc + "/otc/coinlist").then(res => {
          if (res.data.Code == 200) {
            if (res.data) {
              let data = this.$decryptByDES(res.data.Data);
              data = JSON.parse(data);
              console.log("请求过来的法币交易支持数据", data.List);

              this.coinOption = data.List;
              this.transferForm.coin = data.List[0].CoinTag;
              this.reqAsset(data.List[0].Id);
              // 数据持久化存储
              this.$store.commit("store_otcSuppertCoin", data.List);
            } else {
              this.coinOption = [];
            }
          }
        });
      } else {
        console.log(2);
        console.log("读取到的数据", this.otcSuppertCoin);
        this.coinOption = this.otcSuppertCoin;
        this.transferForm.coin = this.coinOption[0].CoinTag;
        this.reqAsset(this.coinOption[0].Id);
      }
    },
    /*
     *币种的切换
     */
    coinChange(val) {
      console.log("当前切换的币种", val);
      let coinid = val;
      this.reqAsset(coinid);
    },
    /*
     *查询可用的划转余额
     */
    reqAsset(coinid) {
      let param = {
        CoinId: coinid
      };
      param = JSON.stringify(param);
      param = this.$encryptByDES(param);
      this.axios
        .post(this.$baseURL + "/transfer/asset", { data: param })
        .then(res => {
          if (res.data.Code == 200) {
            if (res.data) {
              let data = this.$decryptByDES(res.data.Data);
              data = JSON.parse(data);
              console.log("接受到的数据", data);
              this.asset = data;
            }
          }
        });
    },
    /*
     *全部划转按钮的点击
     */
    allClick() {
      this.transferForm.amount = this.$coin(
        this.transferForm.fronAccount == "法币账户"
          ? this.asset.OtcCoin
          : this.transferForm.fronAccount == "otc"
          ? this.asset.OtcCoin
          : this.asset.CecCoin
      );
    },
    /*
     *划转按钮的提交
     */
    submitClick() {
      let _this = this;
      _this.$refs.transferform.validate(function(va, ob) {
        if (va) {
          let type =
            _this.transferForm.fronAccount == "法币账户"
              ? 1
              : _this.transferForm.fronAccount == "otc"
              ? 1
              : 2;
          let param = {
            Coin: _this.$coin(_this.transferForm.amount).toString(),
            CoinId:
              _this.transferForm.coin == _this.coinOption[0].CoinTag
                ? _this.coinOption[0].Id * 1
                : _this.transferForm.coin * 1,
            Type: type * 1 //1.otc转cec  2.cec转otc
          };
          console.log("划转的请求参数", param);
          param = JSON.stringify(param);
          param = _this.$encryptByDES(param);
          _this.axios
            .post(_this.$baseURL + "/transfer/cointransfer", { data: param })
            .then(res => {
              if (res.data.Code == 200) {
                _this.$message.success(res.data.Msg);
                /*
                 *划转之后重新加载可用余额
                 */
                _this.reqAsset(param.CoinId);
              } else {
                _this.$message.error(res.data.Msg);
              }
            });
        }
      });
    },
    // 价格处理
    numInput(e, num) {
      if (e.target.value) {
        this.$nextTick(() => {
          let point = e.target.value;
          if (point.indexOf(".") != -1) {
            point = point.split(".");
            if (point[1].length >= num) {
              this.transferForm.amount =
                (point[0] + "." + point[1].substring(0, num)) * 1;
            }
          }
        });
      }
    }
  },

  computed: {
    ...mapState(["otcSuppertCoin"])
  },

  created() {
    this.reqOtcSuppertCoin();
  },

  mounted() {}
};
</script>
<style scoped>
/* 划转-弹框*/
.transfer-box {
  width: 100%;
}

.dialog-title {
  width: 703px;
  font-size: 24px;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 33px;
  padding-bottom: 17px;
  border-bottom: solid 1px #eaeaea;
}

.transfer-form {
  padding: 20px 0 20px 0;
  width: 703px;
}
.label-text {
  font-size: 12px;
  color: rgba(153, 153, 153, 1);
  line-height: 17px;
  height: 25px;
}
.coin-select {
  width: 703px;
  margin-bottom: 27px;
}
.choise-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 703px;
}
.choise-select {
  width: 324px;
}
.choise-text {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  position: relative;
  top: -10px;
}
.amount-label {
  display: flex;
  justify-content: space-between;
  width: 703px;
}
.all-text {
  font-size: 12px;
  color: rgba(49, 192, 206, 1);
  line-height: 40px;
  cursor: pointer;
  padding-right: 5px;
}
.footer-box {
  width: 703px;
  display: flex;
  justify-content: flex-end;
  height: 48px;
}
.btn {
  width: 100%;
  height: 48px;
  background-color: #31c0ce;
  font-size: 18px;
  color: rgba(254, 254, 254, 1);
  border: none;
  border-radius: 4px;
}
.btn:hover {
  background: #5acdd8;
  background-color: rgb(90, 205, 216);
  border-color: #5acdd8;
  color: #fff;
  cursor: pointer;
}
</style>
